<!--预警事件-->
<template>
    <div class="early_warning">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="">
            <el-tab-pane label="未处理" name="first"></el-tab-pane>
            <el-tab-pane label="已处理" name="second"></el-tab-pane>
        </el-tabs>
    </div>
    <div class="contentbody">
        <el-scrollbar>
            <div class="content" v-for="item in 5">
                <div class="contentPart">
                    <div class="pointPart">
                        <div class="point"></div>
                        <div class="pointposition">监测点位：</div>
                        <div class="pname">XXXX点位</div>
                    </div>
                    <div class="redPart">
                        <div class="point"></div>
                        <div class="pointposition">液位：</div>
                        <div class="pname">497.11mm 低报</div>
                    </div>
                    <div class="pointPart">
                        <div class="point"></div>
                        <div class="pointposition">触发时间：</div>
                        <div class="pname">2022-06-10</div>
                    </div>
                    <div class="pointPart">
                        <div class="point"></div>
                        <div class="pointposition">所属企业：</div>
                        <div class="pname">山东XXXX有限公司</div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const activeName = ref('first');
</script>

<style scoped lang="scss">

.early_warning {
    position: relative;
    ::v-deep(.el-tabs__item) {
        font-size: 12px;
        color: #ffffff;
        &:hover {
            color: #0e96ff;
        }
    }
    ::v-deep(.el-tabs__item.is-active) {
        color: #0e96ff;
    }

    ::v-deep(.el-tabs__nav-wrap)::after {
        background-color: rgba(14, 150, 255, 0.29);
    }
}
.contentbody {
    overflow-y: auto;
    height: calc(100% - 130px);
    .content {
        width: 340px;
        height: 166px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        margin-bottom: 16px;
        .contentPart {
            padding: 25px 15px;
            box-sizing: border-box;
            .redPart {
                display: flex;
                align-items: center;
                margin-bottom: 21px;
                .point {
                    width: 3px;
                    height: 11px;
                    background: url('@/assets/image/redPoint.png') no-repeat;
                    background-size: 100% 100%;
                    margin-right: 5px;
                    margin-top: 3px;
                }
                .pointposition {
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #b6b5b5;
                }
                .pname {
                    font-size: 12px;
                    font-weight: 500;
                    color: red;
                }
            }
            .pointPart {
                display: flex;
                align-items: center;
                margin-bottom: 21px;
                .point {
                    width: 3px;
                    height: 11px;
                    background: url('@/assets/image/BluePoint.png') no-repeat;
                    background-size: 100% 100%;
                    margin-right: 5px;
                    margin-top: 3px;
                }
                .pointposition {
                    font-size: 12px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #b6b5b5;
                }
                .pname {
                    font-size: 12px;
                    font-weight: 500;
                    color: #d3e9fc;
                }
            }
        }
    }
}

</style>
